.insupanceProduct {
  width: 100%;
  padding-bottom: 50px;
  background: rgba(247, 248, 250, 1);
  .et-flex-column-center();

  .header {
    position: relative;
    width: 100%;
    text-align: center;
    padding: 20px 0;
    box-sizing: border-box;

    .title {
      line-height: 72px;
      color: @text-color;
      font-size: 28px;
    }

    .title::after {
      width: 60px;
      height: 32px;
      display: inline-block;
      background: url('@/assets/images/home/insupanceProductAfter.png') no-repeat 0 15px;
      margin-left: 30px;
      content: "";
    }

    .title::before {
      width: 60px;
      height: 32px;
      display: inline-block;
      background: url('@/assets/images/home/insupanceProductBefore.png') no-repeat 0 15px;
      margin-right: 30px;
      content: "";
    }
  }

  .container {
    width: @content-width;
    margin: 0 auto;

    .list {
      width: 100%;
      .et-flex-start();

      .list-directory {
        width: 307px;
        height: 480px;
        border-radius: 10px 0px 0px 10px;
        background: linear-gradient(180deg, rgba(39, 128, 209, 0.8) 44%, rgba(75, 130, 221, 1) 100%);

        .title-box {
          width: 100%;
          padding: 58px 87px 50px 43px;
          box-sizing: border-box;

          .title {
            width: 100%;
            font-size: 26px;
            color: white;
          }

          .line {
            width: 57px;
            border: 1px solid white;
            margin: 8px 0 25px;
          }

          .details-btn {
            width: 104px;
            height: 30px;
            line-height: 28px;
            border-radius: 10px;
            font-size: @font-size-large;
            background-color: white;
            color: rgba(80, 151, 216, 1);
            text-align: center;
            cursor: pointer;
          }
        }

        .content {
          width: 100%;
          padding: 50px 0 20px;

          .button-box {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: flex-end;

            .button-item {
              width: 175px;
              height: 55px;
              .et-flex-center();
              border-radius: 5px 0px 0px 5px;
              background-color: rgba(255, 255, 255, 0.3);
              color: rgba(255, 255, 255, 1);
              font-size: 20px;
              cursor: pointer;

              &:not(:first-child) {
                margin-top: 10px;
              }

              &.actived {
                background-color: rgba(255, 255, 255, 1);
                color: rgba(108, 108, 108, 1);
              }
            }
          }
        }
      }

      .item {
        width: 307px;
        height: 480px;
        position: relative;
        .et-flex-column-start();
        background-color: rgba(255, 255, 255, 0.8);

        &:last-child {
          border-radius: 0px 10px 10px 0px;

          .shadow {
            border-radius: 0px 10px 10px 0px;
          }
        }

        .info-box {
          width: 307px;
          height: 480px;
          .et-flex-column-start();

          .title {
            flex: 1;
            width: 100%;
            line-height: 30px;
            padding: 52px 24px 37px;
            box-sizing: border-box;
            color: rgba(79, 79, 79, 0.8);
            font-size: 26px;
            .et-text-nowrap();
          }

          .info {
            flex: 3;
            width: 100%;
            padding: 0 56px;
            box-sizing: border-box;
            .et-flex-column-start();

            .info-item {
              width: 100%;
              .et-flex-start();

              &:not(:first-child) {
                margin-top: 18px;
              }

              .drop {
                width: 10px;
                height: 10px;
                border-radius: 50px;
                background-color: rgba(75, 130, 221, 1);
                margin-right: 5px;
              }

              .value {
                font-size: 19px;
                color: rgba(79, 79, 79, 0.8);
              }
            }
          }

          .img-box {
            flex: 3;
            width: 100%;
            padding: 15px 10px 22px;

            img {
              width: 100%;
              height: 191px;
            }
          }
        }

        .shadow {
          width: 307px;
          height: 480px;
          display: none;
          background: rgba(0, 0, 0, .5);
          z-index: 777;
          padding: 0 10px 0 20px;
          box-sizing: border-box;
          color: white;
          position: absolute;
          top: 0;
          left: 0;
        }

        .shadow-btn {
          width: 150px;
          height: 35px;
          line-height: 35px;
          font-size: @font-size-base;
          text-align: center;
          border-radius: 10px;
          z-index: 778;
          background-color: rgba(252, 146, 57, 1);
          color: rgba(255, 255, 255, 1);
          display: none;
          position: absolute;
          bottom: 15%;
          left: 25%;
          cursor: pointer;
        }

        &:hover {
          .info-box {
            .title {
              color: rgba(255, 255, 255, 1);
              z-index: 778;
            }

            .info {
              z-index: 778;

              .info-item {
                .drop {
                  background-color: rgba(252, 146, 57, 1);
                }

                .value {
                  color: rgba(255, 255, 255, 1);
                }
              }
            }
          }

          .shadow {
            display: block;
          }

          .shadow-btn {
            display: block;
          }
        }
      }
    }
  }
}